<template>
<div class="container">
<Member></Member>
<!--兴趣技能-->
  <Condition @search="searchHandler" :choisesList="conditionStore.choisesList"></Condition>
<!-- 排序 -->
  <Sort @sort="sortHandler"></Sort>
<!-- 视频 列表-->
    <Video :videosList="videoStore.videosList" @loadmore="loadmoreHandler"></Video>
</div>
</template>

<script setup lang="ts">
import Member from './member.vue'
import Video from "@/components/Video.vue";
import {useConditionStore} from '@/store/condition'
import {onMounted, ref} from "vue";
import {useVideoStore} from "@/store/video";
import sortApi from "@/api/sort";
import {useUserInfoStore} from '@/stores/login'
const userStore = useUserInfoStore()
const conditionStore = useConditionStore()
const videoStore = useVideoStore()
const filterInfo = ref([]) // 搜索接口入参
const pageSize = ref(20)
const pageNum = ref(0)
const tagIndex = ref(1)
const choisesList = ref([])
// const token = ref('9f94634c-eef5-4810-91ac-11fcd9a51bb7')
const token = userStore.token


// 获取选择条件列表---兴趣技能
const getConditionList = () => {
  conditionStore.getConditionList(token)
}
// 获取视频列表
const getVideoList = ()=>{
  videoStore.getSort(tagIndex.value,token,pageSize.value,pageNum.value, {filterInfo:filterInfo.value})
}
// 获取带查询条件列表
const searchHandler = (val:any)=>{
  filterInfo.value = val
  pageNum.value = 0
  getVideoList()
}
// 获取带排序的列表
const sortHandler = (val:any)=>{
  pageNum.value = 0
  tagIndex.value = val
  getVideoList()
}

// 加载更多
const loadmoreHandler = (val:any)=>{
  pageNum.value++
  getVideoList()
}

onMounted(() => {
  getConditionList()
  getVideoList()
})

</script>

<style scoped lang="less">
.el-main{
  background-color: purple;
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.icons{
  background: pink;
}
.img_icon_msg{
  //display: flex;
  float: right;
}


</style>
